<template>
	<view class="cateOutBox">
		<!-- 左边大家电栏 ，一级数据-->
		<scroll-view scroll-y class="scrollLeftBox" :style="{height:wh+'px'}">
			<block v-for="(item,index) of leftList" :key="index" >
				<view :class="['scrollLeftItem',index===active?'active':'']" @click="changeActive(index)">{{item.cat_name}}</view>
			</block>
			
		</scroll-view>
		
		<!-- 右边为大家电的细分类栏目-->
		<scroll-view scroll-y class="scrollRightBox" :scroll-top="scrollTop" :style="{height:wh+'px'}">
			<!-- 大家电的细分类标题 ,遍历出二级数据-->
			<block v-for="(item2,index2) of rightListUp" :key="index2">
				<view class="scrollRightItem1" >/{{item2.cat_name}}/</view>
				<view class="scrollRightItem2">
					<!-- 大家电的细分类标题下面的图文,遍历出三级数据-->
					<navigator class="scrollRightpicBox" v-for="(item3,index3) of item2.children" :key="index3" :url="'../../subpkg/goods_detail/goods_detail?cid='+ item3.cat_id">
						<image :src="item3.cat_icon"></image>
						<text>
							{{item3.cat_name}}
						</text>
					</navigator>
				</view>
			</block>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 定义屏幕可动高度，此高度为屏幕总高-tabbar高-nav高
				wh:0,
				//定义一级数据空数组接收后台一级数据
				leftList:[],
				//定义二级数据空数组接收后台二级数据
				rightListUp:[],
				//定义当前选中项，默认选中第一项
				active:0,
				//滚动条距离顶部距离
				// scrollTop:0
			};
		},
		methods:{
			//promise方法请求分类的网络数据
			async getLeftList(){
				//{data:res}这个用法是{}提取后台数据data，并且给data改名字为res
				const {data:res}=await uni.$http.get("/api/public/v1/categories")
				//如果网络请求失败时弹出提示窗口，提示窗口数据在main.js中设置了showToast的全局方法
				if(res.meta.status!==200){
					return uni.$showPopUp()
				}
				console.log(res)
				//转存后台一级数据
				this.leftList=res.message
				//转存后台二级数据
				this.rightListUp=res.message[0].children
				console.log(this.rightListUp)
			},
			//点击改变active的下标，激活当下选中状态
			changeActive(index){
				//点击获得项目下标并成为激活当前项目
				this.active=index
				//重新改变二级数据的值
				this.rightListUp=this.leftList[index].children
				//让scrollTop的值在1和0间切换，因为uniapp有bug，不会重复执行相同的代码，所以做细微的调整，让scrollTop在0和1间切换
				// this.scrollTop=this.scrollTop===0?1:0
			}
			
		},
		onLoad(){
			// 加载时获取屏幕动态可滚动高度,此高度为屏幕总高-tabbar高-nav高
			//获取系统信息
			const sysInfo=uni.getSystemInfoSync();
			//获取滚动区域的高度
			this.wh=sysInfo.windowHeight;
			// console.log(this.wh)
			
			//加载左边栏一级数据：大电视等
			this.getLeftList()
		}
	}
</script>

<style lang="scss">
.cateOutBox{
	display: flex;
	flex-flow: row nowrap;
}
.scrollLeftBox{
	flex: 1;
// border: 1px solid red;

	.scrollLeftItem{
		line-height: 130rpx;
		text-align: center;
		font-size: 30rpx;
		background-color: #EEEEEE;
		
		// border: 1px solid blue;
		
		//激活的样式
		&.active{
				position: relative;
				background-color: #FFFFFF;
				//被激活时左边的颜色指示条显示
				&::before{
					content: "";
					display: block;
					position: absolute;
					width: 10rpx;
					height: 70%;
					background-color: #007AFF;
					left: 0;
					top:50%;
					transform: translateY(-50%);
				}
			}
		}
	}
	

.scrollRightBox{
	flex: 3;
	background-color: white;
	border: 1px solid green;
}
.scrollRightItem1{
	text-align: center;	
	padding: 20rpx;
	}
	
.scrollRightItem2{
	display: flex;
	flex-flow: row wrap;
}	
.scrollRightpicBox{
	width: 33%;
	font-size: 30rpx;
	display: flex;
	flex-flow: column;
	align-items: center;
	justify-content: space-around;
	
	image{
		width: 75%;
		height: 150rpx;
	}
}
</style>
